import React, { useState, useEffect, useRef } from 'react'
import { Button, Tooltip, Flex } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import './HomePage.css'
import { Outlet } from 'react-router-dom'

import { message } from "antd"

function HomePage() {
    // 按钮组数据数组
    const buttonGroups = [
        { tooltip: 'search', label: 'A' },
        { tooltip: 'search', label: 'B' },
        { tooltip: 'search', label: 'C' },
        { tooltip: 'search', label: 'D' },
        { tooltip: 'search', label: 'E' },
    ]

    const [messageApi, contextHolder] = message.useMessage()

    const info = () => {
        messageApi.info('Hello, Ant Design!')
    }

    // 用于存储鼠标悬停提示信息的状态
    const [hoverMessage, setHoverMessage] = useState('Mouse Over Me')
    const [btnMessage, setBtnMessage] = useState('Please Click Button')
    const [isClicked, setIsClicked] = useState(false)
    const navigate = useNavigate()

    // 使用 useRef 获取 DOM 元素
    const boxRef = useRef(null)
    const btnRef = useRef(null)

    const handleClick = () => {
        setIsClicked(!isClicked) // 切换 isClicked 状态
        setBtnMessage(isClicked ? 'Please Click Button' : 'Thanks for your attention')
        navigate('/homePage')
    }

    const handleRoute = () => {
        navigate('/homePage/cabout')
    }

    useEffect(() => {
        const box = boxRef.current

        const handleMouseOver = () => {
            setHoverMessage('Thanks for your attention')
        }

        const handleMouseOut = () => {
            setHoverMessage('Mouse Over Me')
        }

        box.addEventListener('mouseover', handleMouseOver)
        box.addEventListener('mouseout', handleMouseOut)

        // 清理事件监听器
        return () => {
            box.removeEventListener('mouseover', handleMouseOver)
            box.removeEventListener('mouseout', handleMouseOut)
        }
    }, [])

    return (
        <div className='home-content'>
            <div className='home-content-left'>
                <h1>HomePage</h1>
                <div>Welcome to HomePage!</div>
                <div ref={boxRef} className='box'>{hoverMessage}</div>
                <div ref={btnRef} className='btn-box'>{btnMessage}</div>
                <Button onClick={handleClick}>点击我</Button>
                <Button onClick={handleRoute}>点击我产生子节点</Button>
                {buttonGroups.map((group, index) => (
                    <div key={index} style={{ marginBottom: '20px' }}>
                        <Tooltip title={group.tooltip}>
                            <Button type="primary" shape="circle" icon={<SearchOutlined />} />
                        </Tooltip>
                        <Button type="primary" shape="circle">
                            {group.label}
                        </Button>
                        <Flex gap="small" wrap>
                            <Button type="primary" onClick={() => window.onShow()}>Primary Button 调用 onShow</Button>
                            {contextHolder}
                            <Button onClick={info}>Default Button</Button>
                            <Button type="dashed">Dashed Button</Button>
                            <Button type="text">Text Button</Button>
                            <Button type="link">Link Button</Button>
                        </Flex>
                    </div>
                ))}
            </div>
            <div className='btn-box'>
                <Outlet />
            </div>
        </div>
    )
}

export default HomePage